<template>
  <div class="app-container">
    <div class="recruiters-info">
      <div class="info-block">
        <img :src="customer.faceUrl" alt="" class="recruiters-photo">
        <div class="info">
          <div class="name-block">
            <div class="list-block">
              <div class="name">{{ customer.realName }}</div>
            </div>
          </div>
          <div class="other-block">
            <div class="other-item" v-if="customer.workTime==='工作0年'">工作经验小于1年</div>
            <div class="other-item" v-else>{{ customer.workTime }}</div>
            <div class="other-item">{{ customer.birthday }}</div>
          </div>
          <div class="other-block">
            <div><i class="iconfont icon-xuesheng"></i>{{ customer.education }}</div>
          </div>
        </div>
      </div>
      <div class="block-title">
        <div class="title-item">
          <div class="line"></div>
          <div class="title">求职意向</div>
        </div>

        <div >
          <template v-if="intentionList">
            <div class="title-name" v-for="(item) in intentionList" :key="item.id">
              <div class="name-item">{{item.postName}}&nbsp;&nbsp;<span>/</span></div>
              <div class="name-item">&nbsp;&nbsp;{{item.regArea}}&nbsp;&nbsp;<span>/</span></div>
              <div class="name-item">&nbsp;&nbsp;{{item.salaryMin}}-{{item.salaryMax}}元</div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>
      </div>
      <div class="work-block">
        <div class="title-item">
          <div class="line"></div>
          <div class="title">工作经历</div>
        </div>

        <div>
          <template  v-if="workExpList">
            <div class="work-info" v-for="(item,index) in workExpList" :key="item.id">
              <div class="work-item" >
                <div class="work-name">公司名称：{{item.companyName}}</div>
                <div class="wage-item">
                  <div class="post">工作岗位：{{item.postName}}</div>
                  <div class="wage">{{item.wage}}</div>
                  <div class="time">{{item.workTimeStart}}至{{item.workTimeEnd}}</div>
                </div>
                <div class="describe">工作描述：{{item.duty}}</div>
                <div class="contribution">{{item.contribution}}</div>
              </div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>

      </div>
      <div class="work-block">
        <div class="title-item">
          <div class="line"></div>
          <div class="title">项目经验</div>
        </div>

        <div>
          <template v-if="itemExpList">
            <div class="work-info" v-for="(item,index) in itemExpList" :key="item.id">
              <div class="work-item" >
                <div class="wage-item">
                  <div class="work-name">项目名称：{{item.itemName}}</div>
                  <div class="time">{{item.startTime}}至{{item.endTime}}</div>
                </div>
                <div class="describe">项目描述：{{item.itemContent}}</div>
                <div class="contribution">{{item.contribution}}</div>
              </div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>
      </div>
      <div class="education-block">
        <div class="title-item">
          <div class="line"></div>
          <div class="title">教育经历</div>
        </div>

        <div>
          <template v-if="educationList">
            <div class="education-info" v-for="(item,index) in educationList" :key="item.id">
              <div class="education-item">
                <div class="name-item">
                  <div class="education-name">{{item.schoolName}}</div>
                </div>
                <div class="wage-item">
                  <div class="post">{{item.major}}·{{item.educationText}}</div>
                  <div class="time">{{item.startTime}}至{{item.endTime}}</div>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>

      </div>

      <div class="language-block">
        <div class="title-item">
          <div class="line"></div>
          <div class="title">语言能力</div>
        </div>

        <div >
          <template v-if="languageList">
            <div class="language-info" v-for="(item,index) in languageList" :key="item.id">
              <div class="authentication">{{item.languagesText}}</div>
              <div class="authentication">{{item.redAndWrtText}}</div>
            </div>
          </template>
          <el-empty v-else></el-empty>
        </div>

      </div>
      <div class="block-title">
        <div class="title-item">
          <div class="line"></div>
          <div class="title">附加信息</div>
        </div>
        <div v-if="additional">
          <div >
            <div class="title-name" style="white-space: pre-wrap;" v-html="additional.data">
            </div>
          </div>
        </div>
        <el-empty v-else></el-empty>
      </div>
    </div>


  </div>
</template>

<script>
import {
  findAllByCustomerIdApi, getAdditionalByIdApi,
  getCustomerApi,
  getEducationListApi,
  getIntentionListApi,
  getItemExpListApi,
  getWorkExpListApi
} from "@/api/customer";

export default {
  name: 'ComDetails',
  data() {
    return {
      customer: {
        faceUrl: ''
      },
      intentionList: [],
      workExpList: [],
      itemExpList: [],
      educationList: [],
      languageList: [],
      additional: {},
      formLoading: false,
    }
  },
  props: ['id', 'closeDialog'],
  methods: {

    getCustomer() {
      getCustomerApi({id: this.id}).then((res) => {
        console.log(res)
        this.customer = res;
      })
    },
    getIntentionList() {
      getIntentionListApi({id: this.id}).then((res) => {
        this.intentionList = res;
      })
    },
    getWorkExpList() {
      getWorkExpListApi({id: this.id}).then((res) => {
        this.workExpList = res;
      })
    },
    getItemExpList() {
      getItemExpListApi({id: this.id}).then((res) => {
        this.itemExpList = res;
      })
    },
    getEducationList() {
      getEducationListApi({customerId: this.id}).then((res) => {
        this.educationList = res;
      })
    },
    findAllByCustomerId() {
      findAllByCustomerIdApi({id: this.id}).then((res) => {
        this.languageList = res;
      })
    },
    getAdditionalById() {
      getAdditionalByIdApi({id: this.id}).then((res) => {
        this.additional = res;
      })
    }

  },
  mounted() {
    this.getCustomer();
    this.getIntentionList();
    this.getWorkExpList();
    this.getEducationList()
    this.getItemExpList();
    this.findAllByCustomerId();
    this.getAdditionalById();
  },
}
</script>
<style scoped>
/*
*让select撑开
*/
.el-select, .el-cascader {
  display: block;
}

.recruiters-info{
  padding: 20px;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
.info-block{
  display: flex;
  flex-direction: row;
.recruiters-photo{
  width: 85px;
  height: 85px;
  border-radius: 50%;
}
.info{
  width: 100%;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
.name-block{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
.list-block{
  display: flex;
  flex-direction: row;
  align-items: center;
.name{
  font-size: 22px;
  font-weight: bold;
}
.authentication{
  background: #E8F3E3;
  padding: 2px 4px;
  font-size: 12px;
  border-radius: 3px;
  margin-left: 10px;
  color: #58BD61;
}
.time{
  font-size: 11px;
  color: #999;
  margin-left: 370px;
}
}
.btn2{
  width: 70px;
  height: 30px;
}
}
.other-block{
  font-size: 14px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;

.other-item{
  margin-right: 8px;
}
}

}
}
.info-item{
  font-size: 15px;
  margin-top: 30px;
.txt {
  margin-right: 20px;
  text-align: justify;
  word-break: break-word;
}
.hide-btn {
  display: flex;
  justify-content: flex-end;
  color: #ff7626;
  font-size: 15px;
  margin-right: 20px;
}
.hide{
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
}
.block-title{
  border-bottom: #e4e4e4 1px solid;
  display: flex;
  flex-direction:column;
  margin-top: 10px;
.title-item{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
.line {
  margin-top: 3px;
  height: 18px;
  width: 6px;
  background: red;
  border-radius: 20px;
  margin-right: 10px;
}
.title{
  font-size: 18px;
  font-weight: bold;
}
}
.title-name{
  font-size: 15px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
.name-item{
  margin-bottom: 20px;
}
.name-item:last-child{
  border-right: 0px;
}
}
}
.work-block{
  border-bottom: #e4e4e4 1px solid;
.title-item{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
.line {
  margin-top: 3px;
  height: 18px;
  width: 6px;
  background: red;
  border-radius: 20px;
  margin-right: 10px;
}
.title{
  font-size: 17px;
  font-weight: bold;
}
}
.work-info{
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-left: 20px;

.work-item{
.work-name{
  font-size: 16px;
  font-weight: bold;
}
.wage-item{
  display: flex;
  flex-direction: row;
  font-size: 13px;
  margin-top: 5px;
  justify-content: space-between;
.post{
  margin-right: 20px;
  font-weight: bold;
}
.time{
  color: #999;
  margin-top: -30px;
}
}
.department{
//color: #999;
//font-size: 10px;
  font-size: 13px;
  margin-top: 10px;
}
.describe{
  font-size: 13px;
  margin-top: 15px;
  line-height: 1.8;
}
.contribution{
  font-size: 13px;
  margin-top: 5px;
  line-height: 1.8;
  margin-right: 100px;
  margin-bottom: 50px;
}
}
}
}
.education-block{
  border-bottom: #e4e4e4 1px solid;
.title-item{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
.line {
  margin-top: 3px;
  height: 18px;
  width: 6px;
  background: red;
  border-radius: 20px;
  margin-right: 10px;
}
.title{
  font-size: 17px;
  font-weight: bold;
}
}
.education-info{
  display: flex;
  flex-direction: row;
  width: 100%;
.education-img{
  width: 50px;
  height: 50px;
  border-radius: 50px;
}
.education-item{
  margin-left: 20px;
  width: 100%;
.name-item{
  display: flex;
  flex-direction: row;
  margin-top: 16px;
.education-name{
  font-size: 16px;
  font-weight: bold;
}
.authentication{
  background: #E8F3E3;
  padding: 2px 4px;
  font-size: 12px;
  border-radius: 3px;
  margin-left: 10px;
  color: #999;
}
}
.wage-item{
  display: flex;
  flex-direction: row;
  font-size: 13px;
  margin-top: 5px;
  justify-content: space-between;
.post{
  margin-right: 20px;
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.time{
  font-size: 13px;
  color: #999;
  margin-top: -30px;
}
}
}
}
}
.language-block{
.title-item{
  display: flex;
  flex-direction: row;
  margin-top: 10px;
.line {
  margin-top: 3px;
  height: 18px;
  width: 6px;
  background: red;
  border-radius: 20px;
  margin-right: 10px;
}
.title{
  font-size: 17px;
  font-weight: bold;
}
}
.language-info{
  margin-top: 20px;
  display: flex;
  flex-direction: row;
.authentication{
  background: #E8F3E3;
  padding: 2px 4px;
  font-size: 14px;
  border-radius: 3px;
  margin-left: 10px;
  color: #000;
}
}
}
}
</style>
